<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色</title>


    <style>

.menu{
    height: 430px; width: 300px;background-color: #d7d7d7;}
 /*这是背景颜色 高度  宽属性    是div的盒子模型*/

.menu-title{font-size: 20px;
             text-indent: 1em;
             background-color:red ;
             color: aliceblue;
             background-image: url("image/箭头.png");
         /*其中一个定位的图片，*/
             background-repeat: no-repeat;
           /*图片不重复语法*/
             background-position: 169px -9px}
           /*这是图片定位语法*/

            .menu-item{list-style-type: none;
               /*列表去除项目符号*/
                         line-height: 25px;
               /*行高*/
                       list-style-image: url("image/箭头.png");font-size: 22px;}
                          /*这是加的箭头语法*/

           .menu-item a{text-decoration: none;
               /*去除下划线*/
            border: 2px solid red;
               /*这是为了吧每一个词语间隔隔开在每一个词语周围要加一个盒子模型，然后在盒子模型基础上改变盒子的间距，用margin*/
            margin: 7px}
             /*外部间距*/

    </style>



</head>
<body>
<div class="menu">
    <h1 class="menu-title">所有商品分类</h1>
    <ul class="menu-bar">
        <li class="menu-item">
            <a href="#">图书</a>|<a href="#">音像</a>|<a href="#">数字商品</a>
        </li>
        <li class="menu-item">
            <a href="#">家用电器</a>|<a href="#">手机</a>|<a href="#">数码</a>
        </li>
        <li class="menu-item">
            <a href="#">电脑</a>|<a href="#">办公</a>
        </li>

        <li class="menu-item">
            <a href="#">家居</a>|<a href="#">家装</a>|<a href="#">厨具</a>
        </li>

        <li class="menu-item">
            <a href="#">服饰鞋帽</a>|<a href="#">个护化妆</a>
        </li>

        <li class="menu-item">
            <a href="#">礼品箱包</a>|<a href="#">钟表</a>|<a href="#">珠宝</a>
        </li>
        <li class="menu-item">
            <a href="#">食品饮料</a>|<a href="#">保健食品</a>
        </li>
    </ul>
</div>
</body>
</html>